// Button 组件样式 - 适配 Taro 多端框架

.custom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  border-radius: 8px;
  font-size: 28px;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
  box-sizing: border-box;

  // 默认尺寸
  &--default {
    height: 80px;
    padding: 16px 32px;
  }

  // 小尺寸
  &--sm {
    height: 72px;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 24px;
  }

  // 大尺寸
  &--lg {
    height: 88px;
    padding: 20px 64px;
    border-radius: 8px;
    font-size: 32px;
  }

  // 图标按钮
  &--icon {
    height: 80px;
    width: 80px;
    padding: 0;
  }

  // 默认样式
  &--default {
    background-color: #1890ff;
    color: #ffffff;

    &:active {
      background-color: #096dd9;
    }
  }

  // 危险样式
  &--destructive {
    background-color: #ff4d4f;
    color: #ffffff;

    &:active {
      background-color: #cf1322;
    }
  }

  // 轮廓样式
  &--outline {
    background-color: transparent;
    border: 1px solid #d9d9d9;
    color: #262626;

    &:active {
      background-color: #f5f5f5;
      color: #262626;
    }
  }

  // 次要样式
  &--secondary {
    background-color: #f5f5f5;
    color: #262626;

    &:active {
      background-color: #d9d9d9;
    }
  }

  // 幽灵样式
  &--ghost {
    background-color: transparent;
    color: #262626;

    &:active {
      background-color: #f5f5f5;
      color: #262626;
    }
  }

  // 链接样式
  &--link {
    background-color: transparent;
    color: #1890ff;
    text-decoration: underline;
    text-underline-offset: 4px;

    &:active {
      color: #096dd9;
    }
  }

  // 禁用状态
  &--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }
}
